<template>
  <div class="hi-breadcrumb">
    <template v-if="pathInfo && (pathInfo.length - props.startIndex) > 1">
      <el-breadcrumb :separator-icon="ArrowRight">
        <template v-for="(item, index) in pathInfo" :key="item.path">
          <el-breadcrumb-item v-if="index >= props.startIndex">
            <span v-if="index == pathInfo.length - 1">{{ item.meta.detail ? item.meta.detail : item.meta.title }}</span>
            <router-link v-else :to="item.path">{{ item.meta.title }}</router-link>
          </el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </template>
  </div>
</template>

<script setup lang="ts">

import {computed, onMounted} from "vue";
import {ArrowRight} from "@element-plus/icons-vue";
import {useRoute} from "vue-router";

const props = withDefaults(defineProps<{
  startIndex: number,
  rootPath?: any,
  detailLabel?: string,
  triggerPath?: any,
}>(), {
  startIndex: 0,
  columns: [],
});

const route = useRoute();

const pathInfo = computed(() => {
  return route.matched || [];
});

onMounted(() => {
  console.log('--- props.rootPath', props.rootPath)
  addPathInfo(props.rootPath);
})

const addPathInfo = (path: any) => {
  // pathInfo.value.push(path);
}

const clickPath = (index: any) => {
  /*const current = pathInfo.value[index];
  pathInfo.value.splice(index, pathInfo.value.length - index);
  if (props.triggerPath) {
    props.triggerPath(current);
  }*/
}

defineExpose({
      addPathInfo,
    }
)

</script>

<style>
.hi-breadcrumb {
  display: flex;
  flex-direction: row;
  margin-bottom: 8px;
}

</style>